<template>
<van-grid :column-num="3" square :gutter="5">
    <van-grid-item icon="home-o" text="首页"/>
    <van-grid-item icon="user-o" text="首页" dot/>
    <van-grid-item icon="setting-o" text="首页"/>

</van-grid>

<van-grid :column-num="3"  :gutter="5" square>
    <van-grid-item  v-for="item in list" :key="item.id">
        <img :src="item.src" alt="">
        <span>{{item.text}}</span>
    </van-grid-item>
  

</van-grid>
</template>


<script setup>
import icon1 from '../assets/images/menu1.png'
import icon2 from '../assets/images/menu2.png'
import icon3 from '../assets/images/menu3.png'
const list = [
    {id:1,src:icon1,text:'首页'},
    {id:2,src:icon2,text:'设置'},
    {id:3,src:icon3,text:'我的'}

]
</script>
<style scoped>
.van-grid img{
    width: 60%;
}
.van-grid span{
    /* display: block; */
  margin-top: 10px;
  font-size: 12px;;
}

</style>